import React from 'react';
import {Button, Checkbox, Form, Input} from "antd";
import {LockOutlined, UserOutlined} from "@ant-design/icons";
import {NavLink, useNavigate} from "react-router-dom";
import {login} from "../../util/api/SystemApi";
import {setUserInfo} from "../../redux/action/userInfoAction";
import {connect} from "react-redux";

const LoginForm = (props) => {
  const navigate = useNavigate();

  const onFinish = (values) => {
    login(values).then(res => {
      props.setUserInfo(res.data);
      navigate("/home");
    })
  };
  return (
    <div
      style={{
        width: "400px",
        height: "400px",
        position: "absolute",
        margin: "auto",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        background: "rgb(255,255,255)",
        borderRadius: "10px",
      }}>
      <div
        style={{
          width: "350px",
          height: "320px",
          position: "absolute",
          margin: "auto",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        }}>
        <h1><b>登录</b></h1>
        <Form
          name={"login"}
          initialValues={{
            remember: false,
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name={"userName"}
            rules={[
              {
                required: true,
                message: "请输入用户名",
              },
            ]}
          >
            <Input prefix={<UserOutlined/>} placeholder={"用户名"}/>
          </Form.Item>
          <Form.Item
            name={"password"}
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined/>}
              type={"password"}
              placeholder={"密码"}
              autoComplete={"on"}
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name={"remember"} valuePropName={"checked"} noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>
            <NavLink
              to={"/login/retrieve"}
              style={{
                float: "right"
              }}>
              忘记密码?
            </NavLink>
          </Form.Item>
          <Form.Item>
            <Button
              type={"primary"}
              htmlType={"submit"}
              style={{
                width: "350px",
              }}>
              登录
            </Button>
            <div style={{
              height: "50px",
              margin: "25px 0",
            }}>
              没有账号？<NavLink to={"/login/register"}>去注册</NavLink>
            </div>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

const mapDispatchToProps = {
  setUserInfo
}

export default connect(null, mapDispatchToProps)(LoginForm);